<template>
    <div
        id="login-box"
        :style="[{'background-image': 'url(' + require('@/assets/img/login-back.png') + ')'}]"
    >
        <!-- 上半红色遮罩 -->
        <!-- <div class="red-box"></div> -->
        <p class="login-title">嘿，
            <br>你来了 。
        </p>
        <div class="opt-box">
            我正在让这个项目变得更好，敬请期待 。
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {};
    },
    created () {},
};
</script>
<style lang="less" scoped>
#login-box {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: relative;
    background-size: 100% 100%;
    background-color: #142547;
    color: #fff;
    user-select: none;

    // .red-box {
    //     width: 2000px;
    //     height: 2000px;
    //     background: #dc4f4a;
    //     transform: rotate(-12deg) translate(-30px, -600px);
    // }
    .login-title {
        font-size: 68px; /*px*/
        line-height: 1.3;
        margin-left: 40px;
        margin-top: 250px;
    }

    .opt-box {
        font-size: 32px; /*px*/
        margin-left: 40px;
        margin-top: 100px;
        color: #fff;
        transform: rotate(-13.5deg);
    }
}
</style>
